<!DOCTYPE html>
<html lang="zh">
<head>
  <title>复选框、开关和单选按钮</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
</head>
<body>
<ul class="list">
  <li class="item item-divider royal-bg" href="#">复选框</li>
  <li class="item item-checkbox">
    <div class="checkbox"><input type="checkbox" checked/></div>
    铃声
  </li>
  <li class="item item-checkbox">
    <div class="checkbox"><input type="checkbox" checked/></div>
    震动
  </li>

  <li class="item item-divider royal-bg">开关</li>
  <li class="item item-toggle">
    通知
    <div class="toggle toggle-positive">
      <input type="checkbox" checked/>
      <!--滑轨和手柄-->
      <div class="track">
        <div class="handle"></div>
      </div>
    </div>
  </li>

  <li class="item item-divider royal-bg">单选按钮</li>
  <li class="item item-radio">
    <input type="radio" name="sex" checked/>
    <div class="radio-content">
      <div class="item-content">男</div>
      <i class="radio-icon ion-checkmark"></i>
    </div>
    <div class="radio-content">
      <div class="item-content">女</div>
      <i class="radio-icon ion-checkmark"></i>
    </div>
  </li>
</ul>
</body>
</html>
